<template>
	<!-- 外面最大的div -->
	<view class="sideBox">
		<!-- 当地的地图 -->
		<view class="pageBody">
			<view class="page-section page-section-gap">
				<map style="width: 100%; height: 520px;" :latitude="latitude" :longitude="longitude" :markers="covers">
				</map>
			</view>
			<!-- 签到的div -->
			<view class="signBox">
				<text>劲松二区-东门</text>
				<text>北京市朝阳区京东而去系校园二楼</text>
				<view class="sign">
					<text>点击</text>
					<text>签到</text>
				</view>
				<navigator url="" class="nav1">
					<view class="signRecord">				
							<text>查看我的签到记录</text>
							<text>></text>
					</view>
				</navigator>
				<!-- 已签到的div -->
				<view class="alreadySign display">
					<text>√</text>
					<text>已签到</text>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
export default {
	data() {
		return {
	  id:0, // 使用 marker点击事件 需要填写id
			title: 'map',
			latitude: 39.909,
			longitude: 116.39742,
			covers: [{
				latitude: 39.909,
				longitude: 116.39742,
				// iconPath: '../../../static/location.png'
			}, {
				latitude: 39.90,
				longitude: 116.39,
				// iconPath: '../../../static/location.png'
			}]
		}
	},
	methods: {

	}
}
</script>

<style lang="less" scoped>
.sideBox {
	.pageBody {
		position: relative;
		.signBox {
			position: absolute;
			width: 690rpx;
			height: 462rpx;
			bottom: 2%;
			left: 4%;
			background-color: #fff;
			border-radius: 10rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			align-items: center;
			>text:nth-child(1) {
				font-size: 32rpx;
				font-weight: 600;
				margin-top: 56rpx;
			}
			>text:nth-child(2) {
				font-size: 22rpx;
				color: #999;
			}
			.sign {
				width: 140rpx;
				height: 140rpx;
				border: 10rpx solid #fdcf53;
				border-radius: 50%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				font-size: 22rpx;
				color: #999;
			}
			.signRecord {
				width: 630rpx;
				height: 87rpx;
				border-top: 1px solid #999;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 28rpx;
				// .nav1 {
				// 	display: flex;
				// 	justify-content: space-between;
					
				// }
			}
			.alreadySign {
				width: 140rpx;
				height: 140rpx;
				background-color: #46D768;
				border-radius: 50%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				font-size: 22rpx;
				color: #fff;
			}
			.display {
				display: none;
			}
		}
	}
}

</style>
